import type { MenuDataItem } from '@ant-design/pro-layout';
import { DefaultFooter } from '@ant-design/pro-layout';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import type { ConnectProps } from 'umi';
import { connect, Link } from 'umi';
import { SelectLang } from '@/components/SelectLang';
import React from 'react';
import type { ConnectState } from '@/models/connect';
import logo from '../assets/logo.svg';
import styles from './UserLayout.less';
import { ConfigProvider } from 'antd';
import { loadLocaleByCode } from '@/utils/I18nUtils';
import type { Dispatch } from '@@/plugin-dva/connect';
import { useTranslation } from 'react-i18next';
import type { LanguageItem } from '@/components/SelectLang/typing';

export type UserLayoutProps = {
  breadcrumbNameMap: Record<string, MenuDataItem>;
  languageList: LanguageItem[];
  selectedLangCode: string;
  dispatch: Dispatch;
} & Partial<ConnectProps>;

const UserLayout: React.FC<UserLayoutProps> = (props) => {
  const { t } = useTranslation();
  const { languageList, selectedLangCode } = props;
  const { children } = props;
  const title = 'Pzy Easy Pro';
  return (
    <ConfigProvider locale={loadLocaleByCode(selectedLangCode)}>
      <HelmetProvider>
        <Helmet>
          <title>{title}</title>
          <meta name="description" content={title} />
        </Helmet>

        <div className={styles.container}>
          <div className={styles.lang}>
            <SelectLang languageList={languageList} />
          </div>
          <div className={styles.content}>
            <div className={styles.top}>
              <div className={styles.header}>
                <Link to="/">
                  <img alt="logo" className={styles.logo} src={logo} />
                  <span className={styles.title}>Pzy Easy Pro</span>
                </Link>
              </div>
              <div className={styles.desc}>{t('userLayoutTitle')}</div>
            </div>
            {children}
          </div>
          <DefaultFooter />
        </div>
      </HelmetProvider>
    </ConfigProvider>
  );
};

export default connect(({ settings, global }: ConnectState) => ({
  ...settings,
  languageList: global.languageList
}))(UserLayout);
